<template>
  <div class="home-page">
    <!-- Header组件 -->
    <Header>
      <template v-slot:middle>
        饿了么
      </template>
    </Header>

    <!-- 输入框 -->
    <div class="input-box">
      <input type="text" placeholder="输入商家" @click="$router.push({ name:'search',params:{shoplist} })">
      
    </div>

    <!-- 轮播图 -->
    <mt-swipe>
      <mt-swipe-item>
        <img src="https://dummyimage.com/300x200/ff0" alt="">
      </mt-swipe-item>
      <mt-swipe-item>
        <img src="https://dummyimage.com/300x200/f0f" alt="">
      </mt-swipe-item>
      <mt-swipe-item>
        <img src="https://dummyimage.com/300x200/0ff" alt="">
      </mt-swipe-item>
    </mt-swipe>

    <!-- 店铺列表 -->
    <div class="list">
      <router-link :to="{name:'detail',params:{item}}" class="item" v-for="(item,index) in shoplist" :key="index">
        <div class="pic">
          <img :src="item.pic" alt="">
        </div>
        <div class="text">
          <div class="name">{{item.name}}</div>
          <div>月售 {{item.buyCount}}</div>
          <div>描述 {{item.desc}}</div>
        </div>
      </router-link>
    </div>

    <!-- Tabbar组件 -->
    <Tabbar></Tabbar>

  </div>
</template>

<script>

import Axios from 'axios'

export default {
  name: 'Home',
  data:function(){
    return {
      shoplist:[]//保存店铺列表
    }
  },
  mounted(){
    Axios.get('/shoplist').then((res)=>{
      this.shoplist = res.data.list
    })
  },
  components: {
  
  }
}
</script>

<style scoped>
.mint-swipe{
  height: 200px !important;
}
.mint-swipe img{
  width: 100%;
}
.home-page .input-box{
  padding: 20px;
  background-color: lightskyblue;
}
.home-page .input-box input{
  background-color: white;
  border-radius: 20px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  width: 100%;
  border: none;
  outline: none;

}

.list .item{
  text-decoration: none;
  color: #333;
  display: flex;
  margin: 20px;
}
.list .item .pic{
  width: 70px;
  margin-right: 20px;
}
.list .item .pic img{
  width: 100%;
}
.list .item .text{
  font-size: 14px;
  flex: 1;
}
.list .item .text .name{
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 10px;
}

</style>
